{include file="common/_meta" /}
<title>幻灯片添加</title>
<meta name="keywords" content="李志立，lizhilimaster@163.com">
<meta name="description" content="李志立，lizhilimaster@163.com">
</head>
<body>
	<div class="page-container">
		<form action="" method="post" class="form form-horizontal" id="form-category-add" enctype="multipart/form-data">
			<input type="hidden" name="id" value="{$data.id}" />
			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2"><span class="c-red">*</span>顶部导航：</label>
				<div class="formControls col-xs-9 col-sm-9"> <span class="select-box">
						<select name="pn_id" class="select"  onchange="change(this)">
							{volist name="ding" id="vo"}
							<option {if $vo['id']==$data.pn_id} selected="selected" {/if} value="{$vo.id}">{$vo.name}</option>
							{/volist}
						</select>
					</span> </div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2"><span class="c-red">*</span>侧面父导航：</label>
				<div class="formControls col-xs-9 col-sm-9"> <span class="select-box">
						<select name="fid" id="cate" class="select">
							<option value=0>顶部栏目</option>
							{volist name="ce" id="vo"}
							<option {if $vo['id']==$data.fid} selected="selected" {/if} value="{$vo.id}">{$vo.name}</option>
							{/volist}
						</select>
					</span> </div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2"><span class="c-red">*</span> 导航名称：</label>
				<div class="formControls col-xs-9 col-sm-9">
					<input type="text" class="input-text" value="{$data.name}" placeholder="导航名称" name="name">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2"><span class="c-red">*</span> 图标：</label>
				<div class="formControls col-xs-9 col-sm-9">
					<input type="hidden" name="icon" id="icon" value="{$data.icon}" />
					  <a onclick="system_category_add('添加侧面导航','{:url('pilot/icon')}',800,600)" href="javascript:void(0);" class="btn btn-primary radius btn-upload"><i class="Hui-iconfont">&#xe642;</i> 选择图标</a>
					  <i class="icon Hui-iconfont lizhili-icon">{$data.icon|raw|default='没有图标'}</i>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2"><span class="c-red">*</span> 导航地址：</label>
				<div class="formControls col-xs-9 col-sm-9">
					<input type="text" class="input-text" value="{$data.url|default='没有地址'}" placeholder="导航地址" name="url">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2">是否启用：</label>
				<div class="formControls col-xs-9 col-sm-9">
					<div class="switch" data-on-label="开" data-off-label="关">
						<input type="checkbox" name="isopen" checked="checked" />
					</div>
				</div>
			</div>
			<div class="row cl">
				<div class="col-9 col-offset-2">
					<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
				</div>
			</div>
		</form>
	</div>
	{include file="common/_footer" /}
	<style type="text/css">
		.li123 {
			line-height: 30px;
			background: burlywood;
			display: inline-block;
			vertical-align: middle;
			padding: 0 8px;
		}
		.lizhili-icon{
			padding: 5px 8px;
			margin: 0 8px;
			font-size: 22px;
			background-color: #F2F2F2;
		}
	</style>
	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="__MANAGE__lib/jquery.validation/1.14.0/jquery.validate.js"></script>
	<script type="text/javascript" src="__MANAGE__lib/jquery.validation/1.14.0/validate-methods.js"></script>
	<script type="text/javascript" src="__MANAGE__lib/jquery.validation/1.14.0/messages_zh.js"></script>
	<script type="text/javascript">
		$(function() {
			$('.skin-minimal input').iCheck({
				checkboxClass: 'icheckbox-blue',
				radioClass: 'iradio-blue',
				increaseArea: '20%'
			});
			let wo=$("#form-category-add").validate({
				rules: {
					name: {
						required: true,
					},
					pn_id: {
						required: true,
					},
					fid: {
						required: true,
					},
					icon: {
						required: true,
					},
				},
				submitHandler:function(form) {
					$("input[type=\"submit\"]").addClass('disabled').attr("disabled",true);
					var index = layer.load(1, {
						shade: [0.1,'#fff'] //0.1透明度的白色背景
					});
					setTimeout(()=>{
						$("input[type=\"submit\"]").removeClass('disabled').attr("disabled",false);
						layer.close(index);
					},1000)
					form.submit();
				}
			});
		});
		function change(e){
			$.post(
			"{:url('pilot/ajax')}", {
				id: $(e).val(),
				type: 'pilotnav_change',
			},
			function(result) {
				let html='<option value=0>顶部栏目</option>'
				for (let s of result) {
					html+='<option value='+s.id+'>'+s.name+'</option>'
				}
				$('#cate').html(html)
			});
		}
		function system_category_add(title, url, w, h) {
			window.index = layer.open({
				type: 2,
				title: title,
				content: url,
				area: [w+'px', h+'px'],
			});
		}
		function wo(e,v){
			$('.lizhili-icon').text(e)
			$('#icon').val(v);
		}
	</script>
</body>
</html>
